<template>
	<view class="content">
		<view class="herder" :style="'background-image: url(' + storeform.photo + ')'">
			<NavBar :navWidth="navWidth"></NavBar>
		</view>
		<view class="titlebox">
			 <view class="title-top">
					<view class="title-hr">
			 		<text style="font-size: 40rpx;">{{storeform.name}}</text>
						<image :src="storeform.logo" mode="widthFix"></image>
					</view>
					<view class="left-noe">
						<text class="address">4.8分</text><text>迷彩专送</text><text>约40分钟</text><text>月售4000+</text>
					</view>
					<view class="left-two">
						<text style="flex-shrink: 0;">公告:</text>
						<view><text @click="phonebtn">联系方式:{{storeform.phone}}</text></view>
					</view>
			 </view>
		</view>
		<view class="tabs" :class="{'translated': tranit }" @touchstart="touchStart" @touchend="touchEnd">
			 <u-tabs :list="list1" 
			 lineColor="#025E21" 
			 lineWidth="30"
			 @click='convert'
			 :activeStyle="{
				 fontSize:'34rpx',
				 color:'#333',
				 fontWeight: 'bold',
			 }"
			 :inactiveStyle="{
			         color: '#999999',
			         fontSize:'28rpx'
			}"
			 ></u-tabs>
			 <view class="menu-box" v-if="title === 0">
				<view class="sidebar">
					<scroll-view scroll-y="true" class="catlist" :style="{height: ht}" enable-back-to-top>
					<view class="men-title" v-for="item in menuList" :key="item.id"
					@click="changeBackgroundColor(item.id)"
					:style="{ backgroundColor: getItemBackgroundColor(item.id) }"
					>{{item.cate_name}}</view>
					</scroll-view>
				</view>
				<view class="menu-list">
					<scroll-view scroll-y="true" class="catlist" :style="{height: ht}"
					 refresher-enabled refresher-threshold="5"
					 refresher-default-style="none" @refresherpulling="qqqqwww">
					 <view class="menu-item" v-for="item in screenlist" :key="item.id">
						 <view class="left">
							<image class="img" :src="item.image"></image> 
						 </view>
						<view class="rigth">
							<view class="srname" @click="detailsbtn(item.id,item.quantity)">{{item.name}}</view>
							<text class="brief" style="font-size: 24rpx;color: #999999;">{{item.brief}}</text>
							<text style="font-size: 22rpx;color: #999999;">月售{{item.sales_num}}+</text>
							<view class="footer">
								<view>
								<text style="font-size: 22rpx;color: #CC0022;">￥</text>
								<text style="font-size: 38rpx;color: #CC0022;">{{item.sales_price}}</text>
								</view>
								<view style="display: flex;">
								<view class="increase" @click.stop="upcart(item)" v-if="Number(item.quantity)"> <text class="iconfont icon-jian"></text> </view>
								<text style="margin: 0 20rpx;" v-if="Number(item.quantity)">{{ item.quantity}}</text>
								<view class="increase" @click.stop="joincart(item)"> <text class="iconfont icon-jiahao"></text> </view>
								</view>
							</view>
						</view>
					 </view>
					 </scroll-view>
				</view>
			 </view>
			 <view class="evaluate" v-else>
				 <UserComment></UserComment>
			 </view>
		</view>
		<TotalPrice :title="title" @filetr="account"></TotalPrice>
		<SpeciFication :show="show" @off="show = $event"></SpeciFication>
		<FooterNavigation></FooterNavigation>
	</view>
</template>

<script>
	import {mapMutations } from 'vuex'
	import navbar from '../component/navbar.vue'
	import totalprice from '../component/totalprice/index.vue'
	import usercomment from '../component/usercomment/index.vue'
	import specification from '../component/specifications/index.vue'
	import {getproduct,getstoreclass,getshop} from '@/api/commodity.js'
	export default{
		data(){
			return{
				touchStartX: 0,  // 触屏起始点x  
				touchStartY: 0,  // 触屏起始点y  
				tranit:false,
				title:0,
				ht:'880rpx',
				totalprice:0,
				show:false,
				productlist:{},
				screenlist:[],
				list1:[
					{name:'点菜'},
					{name:'评价'}
				],
				menuList:[],
				storeform:{},
				selectedItemId: null, // 记录被选中元素的id
				ditys:[],
        navWidth:0
			}
		},
		components:{
			NavBar:navbar,
			TotalPrice:totalprice,
			UserComment:usercomment,
			SpeciFication:specification
		},
		methods:{
			...mapMutations(['pricemd','subtraction','emptymoney']),
			returntop(){
				uni.navigateBack({
					delta:1
				})
			},
			cartmodify(el){
				console.log(el);
			},
			//拨打电话
			phonebtn(){
				uni.makePhoneCall({
					phoneNumber: this.storeform.phone
				});
			},
			convert(item){
				this.title = item.index
			},
			qqqqwww(){
				this.tranit = false
				this.ht='880rpx'
			},
			detailsbtn(id,num){
				uni.navigateTo({
					url:`/page_detailsbtn/product-details/index?id=${id}&number=${num}`
				})
			},
			changeBackgroundColor(id) {
				  this.selectedItemId = id
				  this.screenlist = this.productlist.list.filter(el => el.scate_id === id)
			},
			 getItemBackgroundColor(id) {
			  if (id === this.selectedItemId) {
				return '#fff';
			  } else {
				return '#fafafa';
			  }
			},
			joincart(item){
			 if (!item.quantity) {
				this.$set(item, 'quantity', 1);
			  } else {
				item.quantity += 1;
			  }
			  this.pricemd(Number(item.sales_price))
			},
			upcart(item){
			 if (item.quantity && item.quantity > 0) {
				item.quantity -= 1;
				this.subtraction(Number(item.sales_price))
			  }
			},
			account(){
				const arr = this.productlist.list.filter(el => {
					return el.quantity && el.quantity > 0
				})
				this.ditys = arr.map(item => ({ id: item.id, number: item.quantity }))
				uni.navigateTo({
					url:`/page_ orderform/index?info=${JSON.stringify({type:1,goods:this.ditys})}`
				})
			},
			async storeclass(id){
				const res = await getstoreclass(id)
				this.menuList = res.data
			},
			async storeobj(id){
				const res = await getshop(id)
				this.storeform = res.data
			},
			async productapi(id){
				const res = await getproduct(id)
				this.productlist = res.data
				this.changeBackgroundColor(this.menuList[0].id)
			},
			//触摸开始
			touchStart(e) {
				this.touchStartX = e.touches[0].clientX;  
				this.touchStartY = e.touches[0].clientY;  
			},
			//触摸结束
			touchEnd(e){
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if(Math.abs(deltaY) > 100&& Math.abs(deltaX) < Math.abs(deltaY)) {  
					if (deltaY < 0) {  
						this.tranit = true
						this.ht = '1170rpx'
					} 
				}
			}
		},
		onShow() {
			this.$bus.$on('returnobj',params=>{
				let foundItem = this.productlist.list.find(item => item.id === params.id)
				if (foundItem) {
					if (!foundItem.quantity) {
						this.$set(foundItem, 'quantity', params.num);
					 }else{
						foundItem.quantity = params.num; // 修改 number 属性的值
					 }
				}
			})
		},
		//页面销毁
		onUnload() {
			this.emptymoney()
		},
		onLoad(item) {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.navWidth=menuButtonInfo.width
			this.storeclass(item.id)
			this.storeobj(item.id)
			this.productapi(item.id)
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FAFAFA;
	}
	.content{
		display: flex;
		flex-direction: column;
	}
	.herder{
		height: 300rpx;
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 0 40rpx;
	}
	.titlebox{
		box-sizing: border-box;
		margin: 0 auto;
		width: 670rpx;
		border-radius: 20rpx;
		background-color: #fff;
		transform: translate(0,-60rpx);
		padding: 20rpx 14rpx 18rpx 14rpx;
		.title-top{
			display: flex;
			flex-direction: column;
			.title-hr{
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 150rpx;
					height: 150rpx;
				}
			}
				.left-noe{
					font-size: 26rpx;
					color: #999999;
					margin: 10rpx 0 16rpx;
					.address{
						font-size: 30rpx;
						color: orange;
					}
					text{
						margin-right: 20rpx;
					}
				}
				.left-two{
					display: flex;
					width: 100%;
					color: #999999;
					font-size: 26rpx;	
					text{
						margin-right: 16rpx;
					}
					view{
						width: 90%;
						word-wrap: break-word;
					}
			}
		}
	}
	.tabs{
		position: absolute;
		background-color: #fafafa;
		top: 540rpx;
		width: 100%;
		transition: transform 0.5s;
		.u-tabs{
			padding: 0 40rpx;
			margin-bottom: 20rpx;
		}
		.menu-box{
			display: flex;
			.sidebar{
				background-color: #fafafa;
				.men-title{
					font-size: 26rpx;
					text-align: center;
					line-height:107rpx ;
					width: 140rpx;
					height: 107rpx;
					border-radius: 20rpx 0rpx 0rpx 0rpx;
				}
			}
			.menu-list{
				box-sizing: border-box;
				background-color: #fff;
				width: 100%;
				padding:20rpx 20rpx;
       
				.catlist{
					box-sizing: border-box;
					padding-bottom: 30rpx;
				}
				.menu-item{
					display: flex;
           box-shadow: 0 12rpx 12rpx 0 rgba(225, 225, 225, 0.2);
					&:nth-child(n+2){
						margin-top: 30rpx;
					}
					.left{
						 flex-shrink: 0;
						  width: 200rpx;
						  height: 150rpx;
						  overflow: hidden;
						.img{
						  margin:0 auto;
						  width: 100%;
              height: 100%;
						  object-fit: contain;
						}
					}
					.rigth{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;
						margin-left: 14rpx;
						.srname{
              width: 100%;
							font-size: 32rpx;
							  overflow: hidden;
							  text-overflow: ellipsis;
							  display: -webkit-box;
							  -webkit-box-orient: vertical;
							  -webkit-line-clamp: 2;
						}
            .brief{
              width:calc(100%-214rpx);
            	  overflow: hidden;
            	  text-overflow: ellipsis;
            	  display: -webkit-box;
            	  -webkit-box-orient: vertical;
            	  -webkit-line-clamp: 1;
            }
						.footer{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.increase{
								width: 42rpx;
								height: 42rpx;
								background-color:#025E21;
								border-radius: 50%;
								line-height: 42rpx;
								text-align: center;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
	.translated{
		transform: translateY(-320rpx);
		transition: transform 0.5s;
	}
	.evaluate{
		padding: 50rpx;	
		padding-top: 0;
	}
	.submitto{
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 40rpx;
		background-color: #fff;
		height: 140rpx;
		.submit-left{
			display: flex;
			image{
				width: 97rpx;
				height: 64rpx;
			}
			.submit-price{
				margin-left: 50rpx;
				font-size: 34rpx;
				display: flex;
				flex-direction: column;
				view{
					display: inline-block;
				}
			}
		}
		.submit-btn{
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 68rpx;
			width: 152rpx;
			height: 68rpx;
			border-radius: 60rpx;
			margin-left: 200rpx;
		}
		.green-bg  {
		  background-color: #025E21;
		}
		.gray-bg {
		  background-color:#858585;
		}
	}
</style>